import React from 'react';
import { TimelineEvent } from './schemas';
import styles from './DetailPanel.module.css';

const DetailPanel = ({ event }: { event: TimelineEvent | null }) => {
  if (!event) return <div>请选择一个事件</div>;

  return (
    <div className={styles.detailPanel}>
      <h2>{event.title}</h2>
      <p className={styles.time}>{event.time}</p>
      {event.imageUrl && (
        <img 
          src={event.imageUrl} 
          alt={event.title}
          className={styles.image}
        />
      )}
      <div className={styles.description} dangerouslySetInnerHTML={{ __html: event.description }} />
    </div>
  );
};

export default DetailPanel;
